{extend name="base" /}
{block name="css"}
{/block}
{block name="body"}
<!-- 主要内容 开始 -->
<div class="weui-tab__bd-item">
    <header class="weui-navBar weui-navBar-fixed">
        <a href="javascript:history.go(-1);" class="weui-navBar-item">
            <i class="icon iconfont icon-fanhui"></i>
        </a>
        <div class="weui-center">
            <span class="weui-center-title">个人信息</span>
        </div>
        <a href="javascript:;" class="weui-navBar-item">
        </a>
    </header>
    <div class="weui-tab__panel">
        <div class="weui-cells__title">个人资料</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">头像</label></div>
                <div class="weui-cell__bd"><img src="__IMG__/head.jpg" class="head" width="42">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">编号</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="name" type="text" placeholder="请选择性别" value="{$data.name|default=''}">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">昵称</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" id="nick" type="text" placeholder="请选择昵称" value="{$data.nick_name|default=''}">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
                <div class="weui-cell__bd weui-cell_select">
                    <input class="weui-input" id="sex" type="text" placeholder="请选择性别" value="{if $data.sex eq 1}男{elseif $data.sex eq 2}女{else}未知{/if}" data-values="{$data.sex|default=''}">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="birthday" class="weui-label">生日</label></div>
                <div class="weui-cell__bd">
                  <input class="weui-input" id="birthday" type="text" value="{$data.birthday|default='1995-10-21 08:15'}">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">电子信箱</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" type="text" id="email"  placeholder="12345@qq.com" value="{$data.email}" >
                </div>
            </div>
        </div>
        <div class="weui-cells__title">手机号禁止修改</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">手机号</label></div>
                <div class="weui-cell__bd">{$data.mobile|default=''}</div>
            </div>
        </div>
        <div class="weui-btn-area">
          <button class="weui-btn weui-btn_primary btn-save">确定</button>
        </div>
    </div>
</div>

{/block}
{block name="js"}
<script type="text/javascript">
  $(function () {
    var payimg = '';
    //上传图片
    $('.head').on('change', function (event) {
        var files = event.target.files;
        var formData = new FormData();
        formData.append('file', files[0]);
        $.ajax({
          url: "upload.html",
          type: 'POST',
          data: formData,
          contentType:false,
          processData:false,
          success: function(res){
            if(res.code ==0) return $.toast(res.msg,'text');
            payimg = res.url;
            $("#uploaderFiles").css("background-image","url("+res.url+")")
          }
        });
        $.toast('未开启头像上传功能', 'text');
        return false;
    });
    $("input,select").blur(function () {
        window.scrollTo(0, 0);
    });
    $("#birthday").datetimePicker({
        title: '选择生日',
        onChange: function (picker, values, displayValues) {
        }
    });
    $("#sex").select({
        title: "选择性别",
        items: [
          {
            title: "未知",
            value: "0",
          },
          {
            title: "男",
            value: "1",
          },
          {
            title: "女",
            value: "2",
          }
        ]
    });
    $('.btn-save').click(function () {
        var sex = $.trim($('#sex').data('values'));
        var birthday = $.trim($('#birthday').val());
        var email = $.trim($('#email').val());
        var name = $.trim($('#name').val());
        var nick = $.trim($('#nick').val());
        if (sex == '') $.toptip('请选择性别');
        else if (birthday == '') $.toptip('请选择您的生日');
        else $.post('',{name:name,nick_name:nick,sex:sex,birthday:birthday,email:email},function(res){
            if (res.code === 1) {
                $.toast(res.msg,'text');
                setTimeout(function(){
                    location.href = res.url;
                },1000);
            } else {
                $.toptip(res.msg);
            }
        })
    })
  });
</script>
{/block}